<template>
	<view>
		<view class="icon">
			<image :src='dataList.img' mode="aspectFit" :style="{background:item.img}">
			</image>
			<view class="price">
				<view>
					您的{{dataList.pname}}
				</view>
				<view>
					预估回收价格<text style="font-size: 16rpx;color: #333;">（以现场估计为准）</text>
				</view>
				<view style="margin-top: 20rpx;color: #ff2d49;font-size: 46rpx;">
					{{estimate}}元
				</view>
			</view>
			<view class="back" @tap="back()">
				重新估价
			</view>
		</view>
		
		
		<view style="background: #fff;" id='subscribe'>
			<view class="subscribe" :style="{border:pass?'2px solid red':''}">
				<view class="subscribe-view" @click="selectAddress()">
					<view class="subscribe-view-left"> 取件地址 </view>
					<view v-if="addlength">
						<view v-if="recinfo.detailInfo">
							<view class="tel-name">
								<view class="name">
									{{recinfo.userName}}
								</view>
								<view class="tel">
									{{recinfo.telNumber}}
								</view>
							</view>
							<view class="addres">
								{{recinfo.provinceName}}
								{{recinfo.cityName}}
								{{recinfo.countyName}}
								{{recinfo.detailInfo}}
							</view>
						</view>
						<view v-else>
							<view class="tel-name">
								<view class="name">
									{{recinfo.username}}
								</view>
								<view class="tel">
									{{recinfo.phone}}
								</view>
							</view>
							<view class="addres">
								{{recinfo.recycle_address}}
								{{recinfo.address}}
							</view>
						</view>
		
					</view>
					<view class="subscribe-view-right isselect" v-else>
						请选择取件地址
					</view>
				</view>
		
				<view class="subscribe-view" style="border-bottom: 0;">
					<view class="subscribe-view-left"> 预约时间 </view>
					<view class="subscribe-view-right isselect" @click="bindTimeChange">
		
						<view class="uni-input">{{
			        selectTime === "" ? "请选择预约时间" : selectTime
			      }}</view>
					</view>
				</view>
		
		
			</view>
			
			<view class="getTime" v-if="isShow">
				<view class="popup" @click.stop="close"></view>
				<!-- 预约时间段的写法 -->
				<times @change="getTime" @close="close" beginTime="09:00:00" endTime="20:00:00" :timeInterval="2"
					:isQuantum="true"></times>
			</view>
			
		

		
			<view class="yszc">
				<view class="checkbox" @click="selfChangde()">
					<checkbox :checked="checked" color="#ff4c45" />
				</view>
				<view class="note">
					使用本服务表明您已同意
					<text @tap="toyszc()">《衣之光回收服务协议》</text>
				</view>
			</view>
		
		</view>
		

		<view class="bottom-btn" @tap="successBtn()">
			<view class="btn-name">提交预约</view>
			<view class="btn-tips">免费上门取件，请放心预约</view>
		</view>
	</view>
</template>

<script>
		import times from '@/components/pretty-times/pretty-times.vue'
	export default {
		components: {
			times,
		},
		data() {
			return {
				dataList: {},
				checked: true,
				pass: false,
				recinfo: '',
				selectTime: '',
				yy_date: '',
				start_time: '',
				end_time: '',
				isShow: false,
				addlength: false,
				estimate:'',
			
			};
		},
		onLoad(option) {
			this.dataList = JSON.parse(decodeURIComponent(option.data));
			
			if(this.dataList.pname=="空调"){
				if(this.dataList.order_json[0].second_cate_id==95){
					this.estimate='20~300'
				}else{
						this.estimate='180~1000'
				}
			}else{
				this.estimate='10~300'
			}
			
			
			console.log(this.dataList, "data===");
		},
		onShow() {
			
			uni.getStorage({
				key: 'selectAddress',
				success: (e) => {
					this.recinfo = e.data;
					if (this.recinfo.detailInfo) {
						this.wx_address = this.recinfo
					} else {
						this.wx_address = ''
					}
					if (this.recinfo.id || this.recinfo.detailInfo) {
						this.addlength = true;
					} else {
						this.addlength = false;
					}
					uni.removeStorage({
						key: 'selectAddress'
					})
				}
			});
		},
		
		methods: {
			back() {
				uni.navigateTo({
					url: '/packagePages/tabBar/appliances/add'
				})
			},
			selfChangde() {
				this.checked = !this.checked
			},
			toyszc() {
				uni.navigateTo({
					url: '/pages/user/yszc/index'
				})
			},
			bindTimeChange() {
				this.isShow = true
			},
			getTime(e) {
				console.log(e)
				if (e == "暂无选择") {
					return
				}
				this.yy_date = e.yy_date
				this.start_time = e.start_time
				this.end_time = e.end_time
				this.selectTime = `${this.yy_date} ` + `${this.start_time} ~` + `${this.end_time} `
			},
			
			//选择收货地址
			selectAddress() {
				var token = uni.getStorageSync("token")
				if (token != "") {
					uni.navigateTo({
						url: '/pages/user/address/index?type=select'
					})
				} else {
					this.toLogin()
				}
			},

			
			close() {
				this.isShow = false
			},
			successBtn() {
				
				
				if (!this.recinfo.id & !this.wx_address) {
					this.pass = true
					this.$api.msg("请选择取件地址");
							
					uni.createSelectorQuery().select('#subscribe').boundingClientRect(function(rect) {
						console.log(rect)
						// 使用scrollIntoView方法滚动到目标元素
						uni.pageScrollTo({
							scrollTop: rect.top / 2,
							duration: 500
						})
					}).exec();
					return false;
				}
				if (!this.selectTime) {
					this.pass = true
					this.$api.msg("请选择预约时间");
					uni.createSelectorQuery().select('#subscribe').boundingClientRect(function(rect) {
						// 使用scrollIntoView方法滚动到目标元素
						console.log(rect)
						uni.pageScrollTo({
							scrollTop: rect.top / 2,
							duration: 500
						})
					}).exec();
					return false;
				}
				
				
				let data = {
					address_id: this.recinfo.id,
					cate_type:this.dataList.cate_type,
					from:2,
					order_json:JSON.stringify(this.dataList.order_json),
					good_type:this.dataList.good_type,
					price_type:this.dataList.price_type,
					type: '2',
					weight: 0,
					wx_address: JSON.stringify(this.wx_address),
					yy_date: this.yy_date,
					yy_time: this.start_time + '~' + this.end_time,
					recycle_type:uni.getStorageSync("recycle_type")?uni.getStorageSync("recycle_type"):''
				}
				
				
				this.$api.http.post('recycle-order-add', data).then(res => {
					if (res.msg==='success') {
						this.pass = false
						uni.navigateTo({
							url: '/packagePages/tabBar/appliances/success'
						})
					}else{
							this.$api.msg('预约失败')
					}
				})

			},
		},
	}
</script>

<style lang="scss">
	page {
		background: #f3f4f6;
	}

	.icon {
		background: linear-gradient(135deg, #ffebe1, #fff);
		text-align: center;
		display: flex;
		justify-items: center;
		align-items: center;
		padding: 30rpx;
		margin: 30rpx;
		border-radius: 20rpx;
		font-size: 28rpx;
		justify-content: center;
		box-shadow: 0 4rpx 10rpx #ccc;
		image {
			width: 100rpx;
			display: block;
			height: 100rpx;
			-webkit-box-reflect: below -20rpx -webkit-linear-gradient(transparent, transparent 40%, rgba(255, 255, 255, 0.6));

		}

		.price {
			text-align: left;
			margin-left: 50rpx;
			font-weight: bold;
			margin-right: 40rpx;
		}

		.back {
			background: #ff2d49;
			text-align: center;
			padding: 10rpx 16rpx;
			border-radius: 40rpx;
			font-size: 20rpx;
			color: #fff;
		}

	}
	.subscribe {
		// width: 92%;
		// margin: 30rpx auto 0;
		// border-radius: 10px;
		box-sizing: border-box;
		padding: 40rpx 20rpx;
		margin: 0 20rpx;

		&-view {
			position: relative;
			border-bottom: solid 1rpx #F5F5F5;


			&-left {
				line-height: 40rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #999;
				margin: 20rpx auto;

				&.isrequired {
					position: relative;
					padding-right: 16rpx;

					&::before {
						content: "*";
						display: inline-block;
						line-height: 80rpx;
						position: absolute;
						right: 0px;
						color: #d0021b;
					}
				}
			}

			&-right {
				line-height: 40rpx;
				position: relative;
				padding-right: 20rpx;
				font-size: 30rpx;
				color: #333;
				font-weight: bold;
				margin-bottom: 20rpx;

				&.nodata {
					color: rgba(153, 153, 153, 1);
				}

				&.isselect {
					position: relative;

					&::before {
						content: " ";
						display: inline-block;
						width: 6px;
						height: 6px;
						position: absolute;
						top: 50%;
						right: 0rpx;
						border-width: 2px 2px 0 0;
						border-color: #b0b0b0;
						border-style: solid;
						transform: translateY(-50%) matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
					}
				}
			}

			.tel-name {
				width: 100%;
				display: flex;
				font-size: 30upx;

				.tel {
					margin-left: 40upx;
				}

				.radio {
					display: flex;
					width: 180rpx;
					margin-left: 30rpx;

					.center {
						padding-left: 15rpx;
					}
				}
			}

			.addres {
				width: 100%;
				font-size: 26upx;
				color: #999;
				margin-bottom: 20rpx;
			}
		}
	}
.yszc {
		// width: 92%;
		// margin-top: 30rpx;
		padding: 0 40rpx 30rpx;
		color: #333;
		font-size: 26rpx;
		position: relative;

		.note {
			margin-left: 50rpx;

			text {
				// color: #02BEBD;
				color: #ff4c45;
			}
		}

		.checkbox {
			position: absolute;
			top: 0;

			uni-checkbox .uni-checkbox-input {
				border-radius: 50% !important;
				color: #21A56C !important;
				width: 30rpx !important;
				height: 30rpx !important;
				line-height: 30rpx !important;
				text-align: center !important;
				border: 1rpx solid #21A56C !important;
			}

			uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
				width: 30rpx !important;
				height: 30rpx !important;
				line-height: 30rpx !important;
				text-align: center !important;
				color: #fff !important;
				background: #21A56C !important;
			}

			uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked::before {
				width: 30rpx !important;
				height: 30rpx !important;
				line-height: 30rpx !important;
				text-align: center !important;
				font-size: 30rpx !important;
				font-weight: bold !important;
				color: #fff !important;
				background: #21A56C !important;
				border: #21A56C !important;
			}

			/* 微信中样式 */
			/* #ifdef APP-PLUS ||MP-WEIXIN */
			checkbox .wx-checkbox-input {
				border-radius: 50% !important;
				color: #21A56C !important;
				width: 30rpx !important;
				height: 30rpx !important;
				line-height: 30rpx !important;
				text-align: center !important;
				border: 1rpx solid #21A56C !important;
			}

			checkbox .wx-checkbox-input.wx-checkbox-input-checked {
				width: 30rpx !important;
				height: 30rpx !important;
				line-height: 30rpx !important;
				text-align: center !important;
				color: #fff !important;
				background: #21A56C !important;
			}

			checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
				width: 30rpx !important;
				height: 30rpx !important;
				line-height: 30rpx !important;
				text-align: center !important;
				font-size: 30rpx !important;
				font-weight: bold !important;
				color: #fff !important;
				background: #21A56C !important;
				border: #21A56C !important;
			}

			/* #endif */
		}
	}
.getTime {
		position: relative;
		width: 100%;

		.popup {
			position: fixed;
			width: 100%;
			height: 100%;
			bottom: 0;
			background: rgba(0, 0, 0, 0.5);
			z-index: 9;
		}
	}

	.bottom-btn {
		position: fixed;
		bottom: 0;
		height: 140rpx;
		color: #fff;
		left: 0;
		right: 0;
		background: #ff2d49;
		text-align: center;

		.btn-name {
			margin-top: 26rpx;
			font-size: 30rpx;
			margin-bottom: 8rpx;
		}

		.btn-tips {
			font-size: 20rpx;
		}
	}
</style>